<template>
  <a-modal
    width="1200px"
    v-model:open="showSamplerChoose"
    title="选择扦样员"
    :footer="null"
    :maskClosable="false"
  >
    <a-form
      :model="samplerParam"
      autocomplete="off"
      :label-col="{ span: 4 }"
      style="
        width: 100%;
        display: grid;
        margin-top: 20px;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr); /* 每行3个元素 */
      "
    >
      <a-form-item
        v-for="field in samplerForm.input"
        :label="field.label"
        :name="field.name"
        class="mb-4"
      >
        <a-input
          v-if="field.type === 'input'"
          allow-clear
          v-model:value="samplerParam[field.name]"
          :placeholder="'请输入' + field.label"
        />
        <a-select
          v-if="field.type === 'select'"
          allow-clear
          :v-model:value="samplerParam[field.name]"
          :key="samplerParam[field.name]"
          :placeholder="'请选择' + field.label"
          :options="field.dataRange"
          @change="handleSamplerChange($event, field.name)"
        ></a-select>
        <a-date-picker
          v-if="field.type === 'dateYr'"
          allow-clear
          v-model:value="samplerParam[field.name]"
          picker="year"
          value-format="YYYY"
        />
      </a-form-item>
    </a-form>
    <div class="divider mb-4">
      <a-button type="primary" class="mr-4" @click="getSamplerTableData()"> 查询 </a-button>
      <a-button @click="resetSampler"> 重置 </a-button>
    </div>
    <a-table
      :pagination="samplerPaginationProps"
      :columns="samplerColumns"
      :data-source="samplerDataSource"
      :row-key="'id'"
      bordered
      @resize-column="
        (w, col) => {
          col.width = w;
        }
      "
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'incumbencyStatus'">
          {{ record.incumbencyStatus == 0 ? "在岗" : "已离职" }}
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="primary" @click="handleSamplerChoose(record)"
            >选择</a-button
          >
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { SearchParam, SamplerParam, samplerColumns, ReportParam } from "./mode";
import api from "@/api";
import { each, extend } from "lodash-es";
let samplerDataSource = ref<any[]>([]);
const showSamplerChoose = ref(false);
const emit = defineEmits(["handleQianUser"]);
let samplerParam = reactive(new SamplerParam());
const searchParam = reactive(new SearchParam());
const qianUserRef = ref<ReportParam>({
  employeeName: "",
});
const samplerForm: {
  input: {
    label: string;
    name: keyof SamplerParam;
    type: string;
    dataRange?: any;
  }[];
} = reactive({
  input: [
    {
      label: "员工姓名",
      name: "employeeName",
      type: "input",
    },
    {
      label: "所属组织",
      name: "organization",
      type: "input",
    },
    {
      label: "电话号码",
      name: "phoneNumber",
      type: "input",
    },
  ],
});
const samplerPaginationProps = ref({
  showQuickJumper: true,
  total: 0,
  current: 1,
  defaultPageSize: 10,
  onChange(page: number, pageSize: number) {
    this.current = page;
    samplerParam.pageSize = pageSize;
    samplerParam.page = page;
    getSamplerTableData(page);
  },
  showTotal: (total: number) => `共 ${total} 条记录`,
});
function getSamplerTableData(page?: number): void {
  samplerPaginationProps.value.current = page || 1;
  samplerParam.page = page || 1;

  api.getSamplerList(samplerParam).then((res) => {
    samplerDataSource.value = res.data.data;
    samplerPaginationProps.value.total = res.data.total;
    each(samplerDataSource.value, (item: any, index: number) => {
      item.num = samplerParam.pageSize * (samplerParam.page - 1) + index + 1;
    });
  });
}
const resetSampler = () => {
  extend(samplerParam, new SamplerParam());
  getSamplerTableData();
};
const handleSamplerChange = (e: any, filedName: string): void => {
  samplerParam[filedName] = e;
};
const handleSamplerChoose = (record: any) => {
  qianUserRef.value.employeeName = record.employeeName;
  emit("handleQianUser", qianUserRef.value);
  showSamplerChoose.value = false;
};
const handleShowSamplerChoose = () => {
  showSamplerChoose.value = true;
};
onMounted(() => {
  getSamplerTableData();
});
defineExpose({
  handleShowSamplerChoose,
});
</script>
